import img from '../../assets/image/ceil.png'
import img1 from '../../assets/image/floor.png'
import img2 from '../../assets/image/border-day.png'
import './index.css'
import { Button } from 'antd'
import { useNavigate } from 'react-router-dom'
// import Hf from '../../compments/hf/Hf'
import { Select } from 'antd'
import Sandi from '../../components/Sandi'
import Tupi from '../../compments/tupi/Tupi'
import Tupi1 from '../../compments/tupi/Tupi1'
import Tupi2 from '../../compments/tupi/Tupi2'
import Tupi3 from '../../compments/tupi/Tupi3'
import Tupi4 from '../../compments/tupi/Tupi4'
import { useEffect, useState } from 'react'

import Sp from '../../components/Sp'
import AutoTranslate from '../../components/AutoTranslate'
// 中英文
import { useTranslation } from 'react-i18next';

function Hom() {
    const navtion = useNavigate()
    // 中英文
    const { t, i18n } = useTranslation();
    
    // 控制 Tupi4 显示/隐藏
    const [showTupi4, setShowTupi4] = useState(false)
    const handleChange1 = (value: string) => {
        // console.log(`selected ${value}`);
        i18n.changeLanguage(value)
        localStorage.setItem('lng', value)
    };


    // 设置默认主题为夜晚模式
    useEffect(() => {
        // 立即设置主题，避免闪烁
        document.documentElement.setAttribute('data-theme', 'zinc')
    }, [])

    const lt = () => {
        navtion('/Sd')
    }
    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
        document.documentElement.setAttribute('data-theme', value)
        console.log('Current theme:', document.documentElement.getAttribute('data-theme'));
    };
//    <div className='millimg'>
//                                 <h2>姓名：{t('name')}</h2>
//                                 <h2>年龄：{t('age')}</h2>
//                                 <h2>国家：{t('form')}</h2>
//                             </div>
    return (
        <div className='box'>
            {/* 上面 */}
            <div className='left'>
                <img src={img} width='1520px' />
                <div className='left1'>
                    <Button onClick={() => lt()}>{t('name')}</Button>
                    <Select
                        defaultValue={localStorage.getItem('lng')}
                        style={{ width: 120 }}
                        onChange={handleChange1}
                        options={[
                            { value: 'zh', label: '中文' },
                            { value: 'en', label: '英文' },

                        ]}
                    />
                    <Select
                        defaultValue={localStorage.getItem('lng') === 'en' ? 'zinc' : 'zinc'}
                        style={{ width: 120 }}
                        onChange={handleChange}
                        options={[
                            { value: 'gray', label: t('theme.day') },
                            { value: 'zinc', label: t('theme.night') },

                        ]}
                    />
                </div>
                {/* 示例：主页欢迎语，使用 i18n 资源切换 */}
                <div style={{ padding: '8px 16px' }}>
                  {t('home.welcome')}
                </div>
                <div className='w-[100%] h-[80vh] bg-white dark:text-white 
                 zinc:bg-zinc-600 zinc:text-zinc-50
                gray:bg-gray-50  gray:text-gray-600
               
                '>
                    {/* 中间内容 */}
                    <div className='mill'>
                        <div className='mill1'>
                            <img  src={img2} width='700px' height='400px' />
                         
                            <div className='Spbf' style={{ 
                                position: 'absolute', 
                                top: '350px', 
                                left: '-270px',
                                zIndex: 20,
                                height: '200px'
                             
                            }}>
                                <Sp />
                            </div>
                        </div>
                        {/* 中间左侧3D模型 */}
                        <div className='millxr'>
                            <Sandi />
                        </div>
                    </div>

                </div>
            </div>




            {/* 下边框 */}
            <div className='bottom'>
                <img src={img1} width='1520px' />
                <div className='tubiao'>
                    <Tupi />
                </div>
                <div className='tubiao1'>
                    <Tupi1 />
                </div>
                <div className='tubiao2'>
                     <Tupi2 /> 
                </div>
        <div className='tubiao3'>
            <Tupi3 
            />
        </div>
               
            </div>

        </div>
    )
}

export default Hom
